<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var all_data;//存储全量数据
var heatmap;
var location_last_marker;//临时存储最后一个marker

/*展示位置定位地图*/
function showLocationMap(set_Id){
  //清除上次数据
  removeLastHtml();
  //初始化地图
  initMap_location();
  //获取数据
  getData(set_Id);
  //显示默认
  initShow();
  //开启popover插件
  setPopover();
  //绑定hover css
  setChangeMenuCss();
}

/* 清除上次数据 */
function removeLastHtml(){
  $(".position-content-info").remove();
  
}

/*初始化地图*/
function initMap_location(){
  map = buildMap("googleMap");
  var left = document.getElementById("menu_map_location");//自定义工具栏 (左)
  $("#menu_map_location_father").append($("#menu_map_location_father").html());
  buildControl(left,"left");
}

/* 获取全量数据并加载界面 */
function getData(set_Id){
  var url = "/phone/queryPositionAnalysis?set_Id="+set_Id;
  AjaxUtil.ajaxRequest(url, "json", function(data){
    all_data = data;
  },false);
}

/* 显示默认展示  */
function initShow(){
  //位置分析
  positionShow();
  //热点图
  setHotspot();
}

/* 展示位置分析 */
function positionShow(){
  //top5左侧列表
  setPositionData();  
  //显示白天黑天最新位置点
  showDayNightNewMarkers();
}

/* 加载top5数据 */
function setPositionData(){
  var datalist = all_data.topFive;
  var position_html;
  if (datalist != null) {
    for(var item in datalist) {
      var itemCount = 5;//top5 填充计数
      var dataMap = datalist[item];
      var html = "<tr class='position-content-table-tr position-content-info'>"+
        "<td>"+item*2+"<@spring.message 'phone.analysis.phonesylocation.point' />-"+(Number(item)*2+2)+"<@spring.message 'phone.analysis.phonesylocation.point' /></td>";
	  for(var key in dataMap){
		var data = dataMap[key];
		var x = data.x;
		var y = data.y;
		html += "<td class='tdgreen position-content-info' onclick='showMarker("+JSON.stringify(data)+");'>x:"+x+"<br/> y:"+y+"</td>"; 
		itemCount--;
	  }
	  //补齐剩余位置
	  if(itemCount > 0){
	    for(;itemCount >=0;itemCount--){
	      html += "<td></td>";
	    }	  
	  }
	  html += "</tr>";
	  position_html += html;
    }
    $(".position-content-table-title").after(position_html);
  } else {
    $("#position").attr("disabled","disabled");//没有数据则不展示
  }
}

/* 展示点 */
function showMarker(data){
  //清除最后一个展示点
  removeLastMarker();
  var info_html = setPositionMarkerHtml(data,"<@spring.message 'phone.analysis.phonesylocation.currentLocation' />");
  var x = data.x;
  var y = data.y;
  var point = buildPoint(x,y);
  var marker = buildMarkerByPoint(point,marker_default,info_html);
  clickMarker(marker);
  location_last_marker = marker;
}

/* 显示白天黑天最新位置点 */
function showDayNightNewMarkers(){
  //白天黑天最新所有位置点
  var points = [];
  //白天位置
  setDayPosition(points);
  //黑天位置
  setNightPosition(points);
  //最新位置
  setNewPosition(points);
  //自定切换地图层级
  showAllPoints(points);
}

/* 白天位置 */
function setDayPosition(points){
  var dataMap = all_data.dayPosition;
  if(dataMap != null) {
    for(var key in dataMap){
      var data = dataMap[key];
      var x = data.x;
      var y = data.y;
      if(x != null && y != null) {
        var html = setPositionMarkerHtml(data,"<@spring.message 'phone.analysis.table.positioning.a.dayloaction' />");
        var point = buildPoint(x,y);
        points.push(point);
        buildMarkerByPoint(point,marker_day,html);
      }
    }
  }
}

/* 黑天位置 */
function setNightPosition(points){
  var dataMap = all_data.nightPosition;
  if(dataMap != null) {
    for(var key in dataMap){
      var data = dataMap[key];
      var x = data.x;
      var y = data.y;
      if(x != null && y != null) {
    	var html = setPositionMarkerHtml(data,"<@spring.message 'phone.analysis.table.positioning.a.nightloaction' />");
    	var point = buildPoint(x,y);
        points.push(point);
        buildMarkerByPoint(point,marker_night,html);
      }
    }
  }
}

/* 当前位置 */
function setNewPosition(points){
  var data = all_data.newPosition;
  if(data != null) {
    var x = data.x;
    var y = data.y;
    if(x != null && y != null) {
      var html = setPositionMarkerHtmlNew(data,"<@spring.message 'phone.analysis.table.positioning.a.newlocation' />");
      var point = buildPoint(x,y);
      points.push(point);
      buildMarkerByPointAndJump(point,marker_new,html);
    }
  }	
}

/* 点击marker后展示内容(最新位置，时间为access_Time) */
function setPositionMarkerHtmlNew(data,title){
  var x = data.x;
  var y = data.y;
  var address = data.address;
  var access_Time = data.access_Time;
  var html = "";
  if(x != null && y != null) {
	html += " <div style='overflow:auto;width: 300px;height: 130px;border-bottom:1px solid #eee'> "+
	" <div class='menu-map-row'> "+
    " <div class=''><span class='htmlinfotitle'>"+title+"</span></div>"+
	" </div>"+
    " <div class='menu-map-row'> "+
    " <div class='col-md-4'><span class='htmlinfo'><@spring.message 'phone.analysis.table.positioning.a.Longitude' />:</span></div>"+
    " <div class='col-md-8'><span class='htmlinfo'>" + x + "</span></div> "+
    " </div>"+
	" <div class='menu-map-row'> "+
	" <div class='col-md-4'><span class='htmlinfo'><@spring.message 'phone.analysis.table.positioning.a.Latitude' />:</span></div> "+
	" <div class='col-md-8'><span class='htmlinfo'>" + y + "</span></div> "+
	" </div>"+
	" <div class='menu-map-row'> "+
	" <div class='col-md-4'><span class='htmlinfo'><@spring.message 'phone.analysis.table.positioning.a.Basestation' />:</span></div>"+
	" <div class='col-md-8'><span class='htmlinfo'>" + address + "</span></div> "+
	" </div>"+
	" <div class='menu-map-row'> "+
	" <div class='col-md-4'><span class='htmlinfo'><@spring.message 'phone.analysis.table.positioning.a.Appearancetime' />:</span></div>"+
	" <div class='col-md-8'>"+
	" <div><span class='htmlinfo'>"+access_Time+"</span></div>"+
	" </div>"+
	" </div>"+
	" </div>";
  }
  return html;
}

/* 点击marker后展示内容 */
function setPositionMarkerHtml(data,title){
  var x = data.x;
  var y = data.y;
  var address = data.address;
  var times = data.times;
  var html = "";
  if(x != null && y != null) {
	html += " <div style='overflow:auto;width: 300px;height: 130px;border-bottom:1px solid #eee'> "+
	" <div class='menu-map-row'> "+
    " <div class=''><span class='htmlinfotitle'>"+title+"</span></div>"+
	" </div>"+
    " <div class='menu-map-row'> "+
    " <div class='col-md-4'><span class='htmlinfo'><@spring.message 'phone.analysis.table.positioning.a.Longitude' />:</span></div>"+
    " <div class='col-md-8'><span class='htmlinfo'>" + x + "</span></div> "+
    " </div>"+
	" <div class='menu-map-row'> "+
	" <div class='col-md-4'><span class='htmlinfo'><@spring.message 'phone.analysis.table.positioning.a.Latitude' />:</span></div> "+
	" <div class='col-md-8'><span class='htmlinfo'>" + y + "</span></div> "+
	" </div>"+
	" <div class='menu-map-row'> "+
	" <div class='col-md-4'><span class='htmlinfo'><@spring.message 'phone.analysis.table.positioning.a.Basestation' />:</span></div>"+
	" <div class='col-md-8'><span class='htmlinfo'>" + address + "</span></div> "+
	" </div>"+
	" <div class='menu-map-row'> "+
	" <div class='col-md-4'><span class='htmlinfo'><@spring.message 'phone.analysis.table.positioning.a.Appearancetime' />:</span></div>"+
	" <div class='col-md-8'>";
	for(var item in times) {
	  var time = times[item];
	  html += "<div><span class='htmlinfo'>"+time+"</span></div>";
	}
	html +="</div>"+
	" </div>"+
	" </div>";
  }
  return html;
}

/* 开启Popover插件 */
function setPopover(){
  //加载位置分析
  $("#position").webuiPopover({
    width:"650px",
    height:"530px",
    placement:"bottom-right",
    content:$(".position-body").html(),
    trigger:"click",
    html:true
  });
}

/* 改变菜单栏的样式 */
function setChangeMenuCss(){
  $("#position").hover(function(){
	$(".positionMenuTitle").css("color","#337ab7");
	$(".positionMenuImg").attr("src","img/positionLocationSYAnalysis/position_blue.png");
  }).mouseleave(function(){
	$(".positionMenuTitle").css("color","#666");
	$(".positionMenuImg").attr("src","img/positionLocationSYAnalysis/position_gray.png");
  });
  
  $("#trajectory").hover(function(){
	$(".trajectoryMenuTitle").css("color","#337ab7");
	$(".trajectoryMenuImg").attr("src","img/positionLocationSYAnalysis/trajectory_blue.png");
  }).mouseleave(function(){
	$(".trajectoryMenuTitle").css("color","#666");
	$(".trajectoryMenuImg").attr("src","img/positionLocationSYAnalysis/trajectory_gray.png");
  });
  
  $("#triggerHotspot").hover(function(){
	$(".hotspotMenuTitle").css("color","#337ab7");
	$(".hotspotMenuImg").attr("src","img/positionLocationSYAnalysis/hotSpot_blue.png");
  }).mouseleave(function(){
	$(".hotspotMenuTitle").css("color","#666");
	$(".hotspotMenuImg").attr("src","img/positionLocationSYAnalysis/hotSpot_gray.png");
  });
}

/* 清除上一个点 */
function removeLastMarker(){
  if(location_last_marker != undefined){
    location_last_marker.setMap(null);
  }
}

/* 切换热力图 */
function toggleHeatmap() {
  heatmap.setMap(heatmap.getMap() ? null : map);
}

/*构建热力图*/
function setHotspot(){
  var points = [];
  var datalist = all_data.hotspot;
  if(datalist != null){
    for(var item in datalist){
      var data = datalist[item];
      var split = data.split(",");
      if(split.length == 2){
        var x = split[0];
        var y = split[1];
        var point = buildPoint(x,y);
        points.push(point);
      }
    }
  } else {
	$("#triggerHotspot").attr("disabled","disabled");
  }
  //构建热力图
  buildHotspot(points);
}
</script>
</body>
</html>